<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/common(title='代码分享网')}"
>
    <head>

        <title>代码分享网</title>
    </head>
    <body th:fragment="content">
        <div th:replace="~{common/header::header}"></div>

        <div class="content">
            <form id="myForm" th:action="@{/share}" th:method="get">
                <input type="hidden" th:value="${typeId}" id="typeId" th:name="typeId"/>
                <div class="page-container">

                    <div class="text-r" >

                        <button id="share" type="button" class="btn btn-success" >
                            <i class="Hui-iconfont">&#xe665;</i>
                            分享
                        </button>

                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <ul id="tree" th:class="ztree"></ul>
                        </div>
                        <div class="col-md-9">
                            <table id="table" class="table table-border table-bg table-bordered">
                                <thead>
                                    <tr class="text-c">
                                        <th width="200px">(<span id="type">所有</span>)知识标题</th>
                                        <th width="100px">所属分类</th>
                                        <th width="100px">分享时间</th>
                                        <th width="100px">备注</th>
                                    </tr>
                                </thead>
                                <tbody >
                                    <!--<tr class="text-c" th:each="model:${pageInfo?.list}" th:object="${model}">-->
                                    <!--<td th:text="${model[title]}"></td>-->
                                    <!--<td th:text="${model[typeName]}"></td>-->
                                    <!--<td th:text="${model[tm]}"></td>-->
                                    <!--<td th:text="${model[rm]}"></td>-->
                                    <!--</tr>-->

                                </tbody>
                            </table>
                            <div th:replace="common/page :: page"></div>
                        </div>
                    </div>

                </div>
            </form>
        </div>

        <script type="text/javascript" th:src="@{/js/page.js}"></script>
        <script th:inline="javascript">
            /**
             * 异步获取数据
             * @param pageNum  页码
             */
            function getData(pageNum) {
                $.get(contextPath + "share/data", {
                    pageNum: pageNum,
                    typeId: $("#typeId").val(),
                }, function (d) {

                    //清空表格数据
                    $("table tbody").empty();

                    if (d.total != 0) {
                        var list = d.list;
                         //  重新复制分页控件
                        loadPager(d.pages,d.pageNum);

                          for(var i=0;i<list.length;i++){
                              var strTr="<tr class=\"text-c\">";
                              strTr+="<td><a href=\'"+list[i].url+"\' target='_blank' >"+list[i].title+"</a></td>";
                              strTr+="<td >"+list[i].typeName+"</td>";
                              strTr+="<td>"+list[i].tm+"</td>";
                              strTr+="<td>"+(list[i].rm==undefined?"":list[i].rm)+"</td>";
                              strTr+="</tr>";

                              $("table tbody").append(strTr);
                          }
                    }

                })
            }

            /**
             * 加载分页控件
             * @param pages  页总数
             * @param pageNum 页码
             */
            function loadPager(pages,pageNum) {
                laypage({
                    cont: $("#paging"), //容器,仅支持id名\原生DOM对象,jquery对象
                    pages: pages,   //总页数
                    // skip:true,  //是否开启跳页
                    groups: 6,   //连续显示分页数
                    first: '首页',    //首页
                    last: '尾页',    //尾页
                    // skin:'#1E9FFF',    //皮肤
                    curr: pageNum || 1,     //当前页
                    jump: function (obj, first) {   //触发分页后的回调
                        //触发分页后的回调,并传递当前页obj.cuur
                        if (!first) {
                            // var cuur = obj.curr;    //获取当前页
                            getData(obj.curr);
                        }
                    }
                });

            }
            /**
             * 分类点击事件
             * @param event
             * @param treeId
             * @param treeNode
             */
            function zTreeOnClick(event, treeId, treeNode) {
                var id = treeNode.id;
                $("#typeId").val(id);
                $("#type").text(treeNode.name);
                $("#type").val(id)
                getData($("#pageNum").val());
            }


            //启动
            $(function () {



//                var zNodes = [
//                    {"name": "a", "open": true, "id": 1, "parentId": 0},
//                    {"name": "b", "open": true, "id": 2, "parentId": 0},
//                    {"name": "c", "open": true, "id": 3, "parentId": 0},
//                    {"name": "aa", "open": true, "id": 4, "parentId": 1},
//                    {"name": "aaa", "open": true, "id": 5, "parentId": 1},
//                    {"name": "bb", "open": true, "id": 6, "parentId": 2},
//                    {"name": "bbb", "open": true, "id": 7, "parentId": 2},
//                    {"name": "cc", "open": true, "id": 8, "parentId": 3},
//                    {"name": "ccc", "open": true, "id": 9, "parentId": 3}
//                ];
                var setting = {
                    check: {
                        enable: false	//是否复选框
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "parentId",
                            rootPId: 0
                        }
                    },
                    callback: {
                        onClick: zTreeOnClick
                    }
                };

                var zNodes = [[${itemTree}]];
                $.fn.zTree.init($("#tree"), setting, eval('(' + zNodes + ')'));

                getData(1);



                $("#share").click(function () {

                    if ($("#type").text() === "所有") {
                        errorMessage("请选择一个分类!");
                        return false;
                    }

                    layer_show("分享知识",contextPath+"share/add?typeId="+$("#type").val()+"&typeName="+$("#type").text(),"700","400");
                })

            });
        </script>
    </body>
</html>